<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期</title>
    <!--引入外部的axios库-->
    <script src="./js/axios.js"></script>
    <script src="./js/vue@3.5.12.global.js"></script>
</head>
<body>
    <div id="app">
       <!-- <button @click="getData">发送get请求获取数据</button>-->
        <table width="100%" border="1">
            <tr v-for="(user,index) in users" :key="index">
                <td>{{user.id}}</td>
                <td>{{user.name}}</td>
                <td>{{user.email}}</td>
            </tr>
        </table>
    </div>
</body>
<script>
    const config = {
        data(){
            return {
                users:[], //数组
                obj:{} //对象
            }
        },
        //定义函数的地方
        methods:{
            //获取远程数据的函数
            getData(){
                // axios发送get请求
                axios.get('https://jsonplaceholder.typicode.com/users')//url
                    //箭头函数 => function
                    .then(resp=>{
                        //执行成功
                        console.log(resp)
                        console.log('-------------------------------------')
                        console.log(resp.data)
                        let data = resp.data;
                        //为users赋值
                        this.users = data;
                    })
                    .catch(error=>{
                        //执行失败
                        console.log(error)
                    })
                    .finally(()=>{
                        console.log('这段代码无论怎样都会执行')
                    });
            }
        },
        //钩子函数：加载时触发
        mounted(){
            //调用函数，获取数据
            this.getData();
        }
    }
    Vue.createApp(config).mount('#app');
</script>
</html>